<script setup>
import { ref } from 'vue';
import ProductList from './ProductList.vue';

// 定义分类数据
const categories = [
  { id: 1, name: '电子产品' },
  { id: 2, name: '服装' },
  { id: 3, name: '家居用品' }
];

// 当前选中的分类ID
const currentCategoryId = ref(1);

// 提供给子组件的商品列表过滤条件
const selectedCategory = computed(() => {
  return categories.find(cat => cat.id === currentCategoryId.value);
});
</script>

<template>
  <div class="category-tabs">
    <button
      v-for="category in categories"
      :key="category.id"
      :class="{ active: category.id === currentCategoryId }"
      @click="currentCategoryId = category.id"
    >
      {{ category.name }}
    </button>
  </div>
  <!-- <ProductList :category="selectedCategory" /> -->
</template>

<style scoped>
.category-tabs button {
  margin-right: 10px;
  padding: 5px 10px;
}

.category-tabs button.active {
  background-color: #4CAF50;
  color: white;
}
</style>